<template>
	<view>
		<view class="status">
			<view class="status-text" style="display: flex;">
				<u-icon name="clock" />
				<text>{{statusText}}</text>
			</view>
			
			<view class="cinema-phone-call" @click="call">
				<view class="title">
						<u-icon name="phone" color="#ffffff" size="18"></u-icon>
					<text style="margin-right: 5rpx;">热线客服</text>
				
				</view>
				<view class="" style="font-size: 22rpx;">
					人工服务时间：
				</view>
				<view class="" style="font-size: 22rpx;">
				上午10:00至晚上22:00
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['statusText'],
		data() {
			return {

			};
		},
		methods:{
			call(){
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync('cinemaPhone'),
					fail:e=>{
						console.log(e);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.status {
		width: 100vw;
		height: 300rpx;
		background-image: linear-gradient(to right, #80dfff, #33ccff);
		padding-top: 40rpx;

		.status-text {
			margin: 0rpx 0 0 30rpx;
			font-size: 38rpx;
			color: #fff;
			display: flex;
			align-items: center;
			text {

				margin-left: 15rpx;
				letter-spacing: 4rpx;
			}
		}
		

	}
	.cinema-phone-call{
		position: absolute;
		font-size: 24rpx !important;
		right: 30rpx;
		top: 20rpx;
		text-align: center;
					color: #fff;
					
					z-index: 99999;
		.title{
			display: flex;align-items: center;
			justify-content: center;
		}
	}
</style>